<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import star from '@/components/AnimatedElements/star.vue'
import userUserStore from '@/pinia/modules/user'
import router from '@/router'

const password = ref('admin')
const username = ref('admin')
const loginConfig = reactive({
  status: false,
})
const route = useRoute()
const userStore = userUserStore()
async function loginSubmit() {
  loginConfig.status = true
  const res = await userStore.userLogin({ username: username.value, password: password.value })
  loginConfig.status = false
  if (res) {
    const query = route.query
    if (query.redirect)
      router.push(`/redirect${query.redirect}`)
    else router.push('/redirect')
  }
}
</script>

<template>
  <div class="main-container">
    <div class="icon-container">
      <!-- <IconComponent />  -->
    </div>
    <div class="logo-container">
      <!-- <LogoComponent />  -->
    </div>
    <div class="form-container">
      <h2>登录</h2>
      <el-form class="login-form">
        <el-form-item label="账号">
          <el-input v-model="username" placeholder="账号" @keydown.enter="loginSubmit" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="password" placeholder="密码" type="password" @keydown.enter="loginSubmit" />
        </el-form-item>
        <el-form-item class="flex-end">
          <el-button
            type="primary" class="myButton" :loading="loginConfig.status" auto-insert-space
            @click="loginSubmit"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <star />
</template>

<style scoped lang="scss">
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // background-color: #000;
  background-image: linear-gradient(to left bottom, #bd5ec2, #5c92ff, #00bbff, #00d8eb, #12ebae);
  height: 100vh;
  position: relative;

  .icon-container {
    position: absolute;
    top: 50px; // 根据需要调整
    left: 50%;
    transform: translateX(-50%);
  }

  .logo-container {
    position: absolute;
    bottom: 100px; // 根据需要调整
    left: 50%;
    transform: translateX(-50%);
  }

  .form-container {
    background-color: #fff; // 表单背景为白色
    padding: 50px 30px 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    // min-width: 300px;
    // max-width: 400px;
    width: 340px;
    text-align: center;
    color: #0c0c0c; // 文字颜色为黑色
    position: relative; // 为了使用伪元素
    transition: all .5s;

    h2 {
      padding: 0 0 20px;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #add8e6; // 天蓝色背景覆盖整个中间部分
      z-index: -1;
      pointer-events: none; // 确保不影响表单的交互
    }

    &:hover {
      cursor: pointer;
      // width: 335px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    }
  }

  // .form-container::before {}

  .login-form :deep(.el-form-item__label) {
    color: #000; // 文字颜色为黑色
  }

  .myButton {
    width: 100%;
  }
}
</style>
